<template>
  <el-form
      ref="historyFormRef"
      :model="historyForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
  >
    <el-form-item label="送水工名称" prop="manId">
      <el-select v-model="historyForm.manId" clearable placeholder="送水工名称">
        <el-option
            v-for="item in watermanList"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="送水时间" prop="sendWaterTime">
      <el-date-picker
          v-model="historyForm.sendWaterTime"
          type="date"
          label="Pick a date"
          placeholder="日/月/年"
          style="width: 100%"
          value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item label="客户名称" prop="clientId">
      <el-select v-model="historyForm.clientId" clearable placeholder="客户名称">
        <el-option
            v-for="item in clientList"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="送水数量" prop="sendWaterCount">
      <el-input v-model="historyForm.sendWaterCount" placeholder="送水数量" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">
        提交
      </el-button>
      <el-button @click="query">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {ref,reactive,onMounted} from "vue";
import request from "@/api/request";
import {ElMessage} from "element-plus";
import router from "@/router";

const historyFormRef = ref(null);
const historyForm = reactive({
  id:null,
  manId:'',
  sendWaterTime:'',
  clientId:'',
  sendWaterCount:''
})
const watermanList = ref([]);
const clientList = ref([]);
const rules = reactive({
  manId: [
    {required: true, message: '请选择送水工名称', trigger: 'blur'}
  ],
  sendWaterTime: [
    {required: true, message: '请选择送水时间', trigger: 'blur'}
  ],
  clientId: [
    {required: true, message: '请选择客户名称', trigger: 'blur'}
  ],
  sendWaterCount: [
    {required: true, message: '请输入送水数量', trigger: 'blur'}
  ]
})
const submitForm = () => {
  if(historyForm.id===null) {
    historyFormRef.value.validate((valid, fields) => {
      if (valid) {
        request.post('/historys/addhistory', historyForm).then(resp => {
          if (resp.code === 20000) {
            ElMessage.success(resp.data);
            router.replace('/history');
          } else {
            ElMessage.error(resp.data);
          }
        })
      }
    })
  }else{
    historyFormRef.value.validate((valid, fields) => {
      if (valid) {
        request.put('/historys/updhistory', historyForm).then(resp => {
          if (resp.code === 20000) {
            ElMessage.success(resp.data);
            router.replace('/history');
          } else {
            ElMessage.error(resp.data);
          }
        })
      }
    })
  }
}
const query = () => {
  router.replace('/history');
}

onMounted(()=>{
  request.get('/watermans/getwatermanlist').then(resp=>{
    if(resp){
      watermanList.value = resp.data;
    }
  })
  request.get('/clients/getclientlist').then(resp=>{
    if(resp){
      clientList.value = resp.data;
    }
  })
  if(localStorage.getItem("historyId")!=0) {
    request.get('/historys/gethistorybyid/' + localStorage.getItem("historyId")).then(resp => {
      if(resp){
        historyForm.id = resp.data.id;
        historyForm.manId = resp.data.manId;
        historyForm.sendWaterTime = resp.data.sendWaterTime;
        historyForm.clientId = resp.data.clientId;
        historyForm.sendWaterCount = resp.data.sendWaterCount;
      }
    })
  }
})
</script>